<template>
  <div class="main-monitor">
      <a-row :gutter="16">
        <a-col :span="4">
          <section style="margin-top: 16px">
            <h3>机房</h3>
            <a-button block>主机</a-button>
          </section>
          <section>
            <h3>网络</h3>
            <a-button block style="margin-bottom:6px">cdn</a-button>
            <a-button block>主域名</a-button>
          </section>
          <section>
            <h3>前台</h3>
            <a-button block style="margin-bottom:6px">静态资源</a-button>
            <a-button block style="margin-bottom:6px">接口响应</a-button>
            <a-button block>js 报错</a-button>
          </section>
          <section>
            <h3>主要页面</h3>
            <a-button block>页面监控</a-button>
          </section>
        </a-col>
        <a-col :span="20" class="operation-area">
          <div class="tools-bar">
            <i class="iconfont icon-play"></i>
            <i class="iconfont icon-reset"></i>
            <i class="iconfont icon-zoom-out"></i>
            <i class="iconfont icon-zoom-in"></i>
            <i class="iconfont icon-save"></i>
          </div>
        </a-col>
      </a-row>    
    
  </div>
</template>

<script>

export default {
  name: 'monitor',
  
}
</script>

<style scoped lang="less">
.main-monitor{
  padding: 0 12px;
  background-color: #fff;
  height: calc(100vh - 184px);
  section{
    margin-top:10px
  }
  .operation-area{
    position: relative;
    height: calc(100vh - 184px);
    background-image: linear-gradient(90deg, rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%),
                      linear-gradient(rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%); background-size: 10px 10px;
    .tools-bar{
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      left: 50%;
      top: 10px;
      width: 150px;
      height: 30px;
      transform: translate(-50%,0);
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5%;

      i{
        color: #2294fe;
        &:hover{
          cursor: pointer;
        }
      }
    }
  }
}
</style>
